import React, { useState } from 'react';
import '../Login/index.less'
import {message, Button, Checkbox, Form, Input } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {getSms} from '@/api/login'
import {register} from '@/api/register'
import {user} from '@/api/type/auth' // 用户信息验证

export default function Register(props: any) {
  // 验证状态
  const [loading,setLoading] = useState<boolean>(false)

  // 用户信息
  const [user,setUser] = useState<user>({
    username: '',
    password: '',
    module: 'register',
    cord: ''
  })

  /*注册*/
  const onFinish = (values:any) => {
    register(values).then(res => {
      if (res.resCode === 0 ) {
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
  }

  /*获取验证码*/
  const getCord = () => {
    setLoading(true)
    getSms(user).then((res:any) => {
      if (res.resCode === 0) {
        message.success(res.message);
      } else {
        message.error(res.message);
      }
      setLoading(false)
    })
  }

  const goLogin = () => {
    props.history.push('/login')
  }

  /*
  更改输入框对象
  */
  const onBlurUser = (e:any) => {
      setUser({
        ...user,
        username: e.target.value,
      })
  }

  return (
    <div className='login-layout'>
      <div className='login'>
        <h1>React Admin Register</h1>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入手机号/邮箱!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号/邮箱" onBlur={(e)=>onBlurUser(e)}/>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          <div className='form-cord'>
            <Form.Item
              name="code"
              rules={[{ required: true, message: '请输入验证码' }]}
            >
              <Input  placeholder="请输入验证码"/>
            </Form.Item>
            <Button type="primary" loading={loading} onClick={getCord}>
              获取验证码
            </Button>
          </div>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              忘记密码?
            </a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              注册
            </Button>
            <Button type="link" onClick={goLogin}>去登录!</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
